<template>
	<view class="bottom-nav" :style="setNavStyle">
		<view class="nav-item" :class="[select === index ? 'nav-item-active':'']" @click="$_click(index)"
			v-for="(nav,index) in list" :key="index">
			<image v-if="select === index" class="nav-item-img-active" :src="nav.srcSelect"></image>
			<image v-else class="nav-item-img" :src="nav.src"></image>
			<view v-if="select === index" class="nav-item-text-active" :style="setActiveFontColorStyle"
				style="font-weight: bold;">{{nav.text}}</view>
			<view v-else class="nav-item-text" :style="setNormalFontColorStyle">{{nav.text}}</view>
		</view>
	</view>
</template>

<script>
	/**  
	 * nvue底部tabbar组件
	 * @author xiaozhizhong
	 * @description 底部导航栏固定在页面底部。
	 */
	export default {
		props: ['selected'],
		data() {
			return {

				select: this.selected,

				/**
				 * 底部导航栏项列表
				 */
				list: [{
						text: "首页", //标题
						src: "/static/images/shopshouye1.png", //未选中图标
						srcSelect: "/static/images/shopshouye2.png", //选中图标
					},
					{
						text: "分类",
						src: "/static/images/shopfenlei1.png",
						srcSelect: "/static/images/shopfenlei2.png"
					},
					{
						text: "购物车",
						src: "/static/images/gouwuche1.png",
						srcSelect: "/static/images/gouwuche2.png",
					},
					{
						text: "我的",
						src: "/static/images/shopwode1.png",
						srcSelect: "/static/images/shopwode2.png",
					},
				],
				/**
				 * 未选中文字颜色
				 */
				fontColor: '#545556',
				/**
				 * 底部上边线颜色
				 */
				borderColor: '#ffffff',
				/**
				 * 背景颜色
				 */
				backgroundColor: '#ffffff',
				/**
				 * 激活文字颜色
				 */
				activeFontColor: '#f3431a',

			}
		},

		computed: {
			/**
			 * 样式设置
			 * */
			setNavStyle() {
				let style = '';
				/*** 背景颜色**/
				if (this.backgroundColor) {
					style += `background-color:${this.backgroundColor};`
				}
				/*** 顶部border**/
				if (this.borderColor) {
					// style += `border-bottom-style:solid;`;
					style += `border-top:1px solid ${this.borderColor};`;
				}
				return style;
			},

			/**
			 * 未激活文字样式
			 */
			setNormalFontColorStyle() {
				let colorStyle = '';
				// 文字颜色
				if (this.fontColor) {
					colorStyle += `color:${this.fontColor};`;
				}
				return colorStyle;
			},
			/**
			 * 激活文字样式
			 */
			setActiveFontColorStyle() {
				let activeFontColorStyle = '';
				if (this.activeFontColor) {
					activeFontColorStyle += `color:${this.activeFontColor};`;
				}
				return activeFontColorStyle;
			}


		},

		methods: {
			/**
			 * 点击事件
			 */
			$_click(index) {
				if (this.select !== index) {
					this.select = index;
					if (index === 0) {
						uni.redirectTo({
							url: '/pages/index/index'
						})
					} else if (index === 1) {
						uni.redirectTo({
							url: '/pages6/pages/product/cate'
						})
					} else if (index === 2) {
						uni.redirectTo({
							url: '/pages6/pages/cart/cart'
						})
					} else if (index === 3) {
						uni.redirectTo({
							url: '/pages6/pages/product/my'
						})
					}
				}
			}

		}

	}
</script>

<style scoped>
	/* 底部导航栏样式变量 */
	.bottom-nav {
		/* overflow: hidden; */
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 152rpx;

		transform-origin: center center;
		transition-property: transform;
		transition-duration: 0.3s;
		transition-delay: 0s;
		transition-timing-function: ease;
	}


	.nav-item {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/* overflow: hidden; */
		height: 100%;

		/*transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);*/
	}

	.nav-item-active {}

	.nav-item-img {
		width: 47rpx;
		height: 42rpx;
		opacity: 1;
	}

	.nav-item-img-active {

		width: 47rpx;
		height: 42rpx;
		opacity: 1;
	}

	.nav-item-text {
		margin-top: 10rpx;
		font-size: 28rpx;
		lines: 1;
		text-align: center;
		text-overflow: ellipsis;
		color: #888;

	}

	.nav-item-text-active {
		font-size: 28rpx;
		font-weight: bold;
		lines: 1;
		text-align: center;
		text-overflow: ellipsis;
		color: #888;
		margin-top: 10rpx;
	}
</style>
